<template>
  <div class="layout">
    <div :class="['menu-box', { 'menu-box-hide': hideMenu }]">
      <!-- <div style="margin-bottom: 20px;">
        <a :href="`/${VUE_APP_PUBLICPATH}`">
          <img :src="logoSrc" alt=" " :class="VUE_APP_USER" />
        </a>
      </div> -->
      <!-- <ul class="menu">
        <li v-for="(e, i) in menu" :key="i" @click="skip(e)" :class="[`menu-${e.meta.icon}`, { 'active': isActive(e) }]">
          <el-tooltip effect="dark" placement="right" :open-delay="600" id="tooltip">
            {{ e.meta.title }}
          </el-tooltip>
        </li>
      </ul> -->
      <div class="menu">
        <Sidebar :list="menu" />
      </div>
    </div>
    <div class="content" :style="{ marginLeft: isCollapse ? '0' : '75px' }">
      <!-- <a href="javascript:;" class="piston" @click="hideMenu = !hideMenu"></a> -->
      <!-- <a href="javascript:;" class="piston" @click="updateIsCollapse()"></a> -->
      <v-head index="0" class="header" :lucency="true" />

      <div class="content-container">
        <slot />
      </div>

      <!-- <v-foot class="home-footer" /> -->
    </div>
  </div>
</template>

<script>
import { getCookie } from "@/utils/tool";
import { paramMap } from '@/utils/maps'
import Sidebar from "./module/sidebar.vue"
import { mapState } from 'vuex';
export default {
  data() {
    return {
      menu: [],
      hideMenu: paramMap["hideMenu"],
      logoSrc: require("@/assets/img/logo_blank.png"),
      myinfo: {},
    };
  },
  props: ["type"],
  methods: {
    isActive(e) {
      if (this.$route.meta.affiliation) {
        return e.name == this.$route.meta.affiliation;
      }
      else if (this.$route.meta.name) {
        return e.name == this.$route.meta.name;
      }
      else {
        return e.path == this.$route.path;
      }
    },
    skip(e) {
      let path = e.path;
      if (e.children && e.children[0]) {
        path = `${e.path}/${e.children[0].path}`;
      }
      if (path == this.$route.path)
        return;
      // let query = {
      //   id: this.$route.query.id
      // }
      this.$router.push({
        path,
        // query,
      });
    },
  },
  computed: mapState({
    isCollapse: state => state.menuStore.isCollapse
  }),
  async mounted() {
    let value = getCookie('path');
    console.log('value',typeof value)
    this.menu = this.$router.options.routes.filter(e => e.affiliation == this.type);
    if (this.menu.length > 0) {
      var newMenu = [];
      this.myInfo = await this.$myInfo(this);
      for (var i = 0; i < this.menu.length; i++) {
        if(value==''){
          console.log('1111')
          if (["/inout", "/my_market", "/my_algorithm",'/modelGame'].includes(this.menu[i].path)) {
            continue;
          }
        }else{
        if (!value.includes(this.menu[i].path)) {
          continue;
        }
        }

        if (this.VUE_APP_USER == "wanjie" && this.menu[i].meta.title == "可视化建模") {
          continue;
        }
        if (this.myInfo != null && this.myInfo.roles.length > 0) {
          if (this.myInfo.roles[0] != "0" && this.menu[i].meta.title == "成员管理") {
            continue;
          }
        }
        newMenu.push(this.menu[i]);
      }
      this.menu = newMenu;
      console.log(this.menu, "menu");

      this.$nextTick(() => {

      })
      // console.log(this.menu);
    }
    if (this.VUE_APP_USER) {
      //console.log("useraaaa====",this.VUE_APP_USER)
      if (this.$IsDarkHue) {
        this.logoSrc = require(`@/assets/img/${this.VUE_APP_USER}/logo.png`);
      }
      else {
        this.logoSrc = require(`@/assets/img/${this.VUE_APP_USER}/logo-white.png`);
      }
    }
    else {
      if (this.$IsDarkHue) {
        this.logoSrc = require("@/assets/img/logo-white.png");
      }
      else {
        this.logoSrc = require("@/assets/img/logo.png");
      }
    }
    //     <img :src="`@/assets/img/${VUE_APP_USER}/logo-white.png`" alt="" v-if="VUE_APP_USER && !$IsDarkHue" />
    //           <img :src="`@/assets/img/${VUE_APP_USER}/logo.png`" alt="" v-if="VUE_APP_USER && $IsDarkHue" />
    //           <img src="@/assets/img/logo-white.png" alt=" " v-if="$IsDarkHue && !VUE_APP_USER" />
    // v-if="!$IsDarkHue && !VUE_APP_USER"
  },
  components: { Sidebar, }
}
</script>

<style lang="less" scoped>
.layout {
  width: 100%;
  height: 100%;
  display: flex;
  background: #F5F5F5;
  box-sizing: border-box;
  // overflow: auto;

  // .menu {
  //   &::before {
  //     // display: block;
  //     content: '';
  //     position: absolute;
  //     width: 60px;
  //     height: 60px;
  //     background: #606266;
  //     mask-repeat: no-repeat;
  //     mask-size: 1.875rem 1.875rem;
  //     mask-position: center;
  //     mask-image: url(~@/assets/img/piston.png);
  //     // left: 8px;
  //     // top: 50%;
  //     right: 0;
  //     top: 0;
  //     // margin-top: -8px;
  //     z-index: 9999;
  //   }
  // }

  .menu-box {
    width: 3.6rem;
    display: flex;
    height: 100%;
    // background: #fff;
    border-right: solid 1px #e6e6e6;
    // margin: 1.25rem 0 1.25rem 1rem;

    // width: 248px;
    // background: #FFF;
    border-radius: 10px;
    // margin: 16px 0 16px 16px;
    position: relative;
    transition: all .3s;

    h1 {
      height: 96px;
      width: 248px;
      overflow: hidden;
      transition: all .3s;
    }

    img {
      width: 172px;
      display: block;
      margin: 32px auto 0;
    }

    .cssc {
      width: 120px;
      margin-left: 10px;
    }
  }

  // .menu {
  //   // width: 200px;
  //   width: 3.75rem;
  //   margin: 0 auto;
  //   transition: all .3s;
  //   overflow: hidden;
  //   // background: #FFF;

  //   li {
  //     width: 100%;
  //     margin: 0 auto;
  //     // font-size: 16px;
  //     // line-height: 36px;
  //     // padding-left: 32px;
  //     cursor: pointer;
  //     // margin-bottom: 8px;
  //     // width: 200px;
  //     height: 3.75rem;
  //     line-height: 3.75rem;
  //     position: relative;
  //     color: #fff;

  //     &::before {
  //       display: block;
  //       content: '';
  //       position: absolute;
  //       width: 60px;
  //       height: 60px;
  //       background: #606266;
  //       mask-repeat: no-repeat;
  //       mask-size: 1.875rem 1.875rem;
  //       mask-position: center;
  //       // left: 8px;
  //       // top: 50%;
  //       // margin-top: -8px;
  //     }
  //   }

  //   .menu-icon1::before {
  //     mask-image: url(~@/assets/img/icon/menu-icon1.svg);
  //   }

  //   .menu-icon2::before {
  //     mask-image: url(~@/assets/img/icon/menu-icon2.svg);
  //   }

  //   .menu-icon3::before {
  //     mask-image: url(~@/assets/img/icon/menu-icon3.svg);
  //   }

  //   .menu-icon4::before {
  //     mask-image: url(~@/assets/img/icon/menu-icon4.svg);
  //   }

  //   .menu-icon5::before {
  //     mask-image: url(~@/assets/img/icon/menu-icon5.svg);
  //   }

  //   .menu-icon6::before {
  //     mask-image: url(~@/assets/img/icon/menu-icon6.svg);
  //   }

  //   .menu-icon7::before {
  //     mask-image: url(~@/assets/img/icon/menu-icon7.svg);
  //   }

  //   .menu-icon8::before {
  //     mask-image: url(~@/assets/img/icon/menu-icon8.svg);
  //   }

  //   .menu-icon9::before {
  //     mask-image: url(~@/assets/img/icon/menu-icon9.svg);
  //   }

  //   .menu-icon10::before {
  //     mask-image: url(~@/assets/img/icon/menu-icon10.svg);
  //   }

  //   .menu-icon11::before {
  //     mask-image: url(~@/assets/img/icon/menu-icon11.svg);
  //   }

  //   .menu-icon12::before {
  //     mask-image: url(~@/assets/img/icon/menu-icon12.svg);
  //   }

  //   .menu-icon13::before {
  //     mask-image: url(~@/assets/img/icon/menu-icon13.svg);
  //   }

  //   .active {
  //     background: rgba(0, 119, 255, 0.0600);
  //     border-radius: 6px 6px 6px 6px;
  //   }
  // }

  .content {
    flex: 1;
    // height: calc(100%);
    // overflow-y: auto;
    // border: 1px solid;
    // margin: 0 16px;
    // margin-left: 16px;
    // padding-right: 16px;
    // padding-bottom: 16px;
    box-sizing: border-box;
    transition: all .5s;
    position: relative;
    overflow-x: auto;

    .header {
      padding: .625rem 2.5rem;
      // position: fixed;
      // top: 0;
      // z-index: 999;
    }

    .content-container {
      padding: 40px 50px;
      position: absolute;
      // overflow: auto;
      top: 58px;
      bottom: 0;
      // left: 0;
      left: 24px;
      right: 0;

      .layout-content {
        // overflow: hidden;
      }
    }

    &::-webkit-scrollbar {
      width: 12px;
    }

    /* 滚动槽 */
    &::-webkit-scrollbar-track {
      box-shadow: inset006pxrgba(0, 0, 0, 0.3);
      border-radius: 10px;
    }

    /* 滚动条滑块 */
    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background: rgba(0, 0, 0, 0.1);
      box-shadow: inset006pxrgba(0, 0, 0, 0.5);
    }

    &::-webkit-scrollbar-thumb:window-inactive {
      background: rgba(0, 0, 0, .06);
    }

    .piston {
      position: absolute;
      // right: -42px;
      left: .625rem;
      top: 16px;
      width: 22px;
      height: 22px;
      background: url(~@/assets/img/piston.png) no-repeat;
      background-size: 22px 22px;
      // transition: all .3s;
    }
  }

  .menu-box-hide {
    width: 0;
    margin: 16px 0;

    h1 {
      width: 0;
    }

    .menu {
      width: 0;
    }
  }
}
</style>
